<!--父组件-->
<script setup lang="ts">
import { ref} from "vue";
import waterFallllVue from "./water-fallll.vue";

let name = "yy"
const getName = (name: string) => {
  console.log(name)
}

// 接收组件实例
// 命名与组件ref一致
// let waterFallll = ref<InstanceType<typeof waterFallllVue>>()
// setup 模式下，直接引用 Vue 文件，则相当于在组件中，注册了子组件
let waterFallll = ref()
const ChildEvent = () => {
  console.log('子组件暴露的name:',waterFallll.value.name)
  waterFallll.value.DoSomeThing();
}
</script>

<template>
  <div style="background-color: aquamarine;width: 100%">
    <div>父级</div>
    <button @click="ChildEvent">调用子组件方法</button>
    <water-fallll-vue @on--click="getName" ref="waterFallll" :arr="[1,2,3]" :title="name"/>
  </div>
</template>

<style scoped lang="scss">

</style>